<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>Introduction to JRuby Swing</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, Swing, JRuby, programming, Linux, Introduction">
<meta name="description" content="This chapter is an introduction to JRuby Swing.">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Introduction to JRuby Swing</h1>

<p>
In this part of the JRuby Swing tutorial, we will introduce the 
Swing toolkit and create our first programs using the JRuby 
programming language.
</p>

<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 

<p>
The purpose of this tutorial is to get you started with the Swing toolkit with 
the JRuby language. Images used in this
tutorial can be downloaded <a href="/img/gui/jythonswing/images.zip">here</a>. 
I used some icons from the Tango icons pack of the Gnome project. 
</p>

<h2>About</h2>

<p>
<b>Swing</b> library is an official Java GUI toolkit for the Java
programming language. It is used to create Graphical user interfaces with Java. 
Swing is an advanced GUI toolkit. It has a rich set of components. From 
basic ones like buttons, labels, scrollbars to advanced components 
like trees and tables. Swing itself is written in Java. Swing is available
for other languages too. For example JRuby, Jython, Groovy or Scala.
</p>

<p>
<b>JRuby</b> is a Java implementation of the Ruby programming language.
JRuby can import any Java class. 
</p>

<p>
There are two basic ways to execute the examples in this tutorial. One way
is to install a Ruby NetBeans plugin. It contains JRuby as well. 
When you create a new Ruby project, be sure to select the JRuby platform.
</p>

<p>
The other way is to download a release from the <a href="http://jruby.org">jruby.org</a>
website.
</p>

<pre>
$ tar -xzvf jruby-bin-1.5.6.tar.gz
$ mv jruby-1.5.6/ ~/bin
</pre>

<p>
Installing JRuby is very easy. We extract the contents of the compressed archive and
move the directory to a selected location. On my system, I have moved the directory
to the bin directory of my home directory.
</p>

<pre>
$ ~/bin/jdk1.6.0_21/bin/java -jar ~/bin/jruby-1.5.6/lib/jruby.jar simple.rb
</pre>

<p>
We have installed JRuby in a selected directory. In the lib subdirectory, we will find
jruby.jar file, which is used to execute JRuby scripts. 
</p>

<pre>
$ cat /usr/local/bin/jruby 
#!/bin/bash

~/bin/jdk1.6.0_21/bin/java -jar ~/bin/jruby-1.5.6/lib/jruby.jar $1
</pre>

<p>
Optionally, we can create a bash file which will automatically start our JRuby 
scripts. We can then put the #!/usr/local/bin/jruby path to our scripts. 
</p>


<h2>Simple example</h2>

<p>
In our first example, we will show a basic window on the screen. 
</p>

<pre class="code">
#!/usr/local/bin/jruby

# ZetCode JRuby Swing tutorial
# 
# This example shows a simple
# window in the center of the screen.
# 
# author: Jan Bodnar
# website: www.zetcode.com
# last modified: December 2010

include Java

import javax.swing.JFrame


class Example &lt; JFrame
  
    def initialize
        super "Simple"
        
        self.initUI
    end
      
    def initUI
        
        self.setSize 300, 200
        self.setDefaultCloseOperation JFrame::EXIT_ON_CLOSE
        self.setLocationRelativeTo nil
        self.setVisible true
    end
end

Example.new
</pre>

<p>
While this code is very small, the application window can do quite a lot. 
It can be resized, maximized, minimized. All the complexity that comes 
with it has been hidden from the application programmer. 
</p>

<pre class="explanation">
include Java
</pre>

<p>
We include Java API to JRuby. 
</p>

<pre class="explanation">
import javax.swing.JFrame
</pre>

<p>
We import a <code>JFrame</code> class. The <code>JFrame</code> is a top-level 
window with a titlebar and a border.
</p>

<pre class="explanation">
self.initUI
</pre>

<p>
We delegate the creation of the user interface to the <code>initUI</code> method.
</p>

<pre class="explanation">
self.setSize 300, 200
</pre>

<p>
We set the size of the window. 
</p>

<pre class="explanation">
self.setDefaultCloseOperation JFrame::EXIT_ON_CLOSE
</pre>

<p>
This method ensures that the window terminates, if we click on the
close button of the titlebar. By default nothing happens. 
</p>

<pre class="explanation">
self.setLocationRelativeTo nil
</pre>

<p>
We center the window on the screen. 
</p>

<pre class="explanation">
self.setVisible true
</pre>

<p>
Finally, the window is showed on the screen. 
</p>


<h2>Tooltip</h2>

<p>
A tooltip is a small rectangular window, which
gives a brief information about an object. 
It is usually a GUI component. It is part of
the help system of the application. 
</p>

<pre class="code">
#!/usr/local/bin/jruby

# ZetCode JRuby Swing tutorial
# 
# This code shows a tooltip on
# a window and a button
# 
# author: Jan Bodnar
# website: www.zetcode.com
# last modified: December 2010

include Java

import javax.swing.JButton
import javax.swing.JFrame
import javax.swing.JPanel


class Example &lt; JFrame
  
    def initialize
        super "Tooltips"
        
        self.initUI
    end
      
    def initUI
      
        panel = JPanel.new
        self.getContentPane.add panel

        panel.setLayout nil 
        panel.setToolTipText "A Panel container"

        button = JButton.new "Button"
        button.setBounds 100, 60, 100, 30
        button.setToolTipText "A button component"

        panel.add button
        
        self.setDefaultCloseOperation JFrame::EXIT_ON_CLOSE
        self.setSize 300, 200
        self.setLocationRelativeTo nil
        self.setVisible true
    end
  
end

Example.new
</pre>

<p>
In the example, we set the tooltip for the frame and the button.
</p>

<pre class="explanation">
panel = JPanel.new
self.getContentPane.add panel
</pre>

<p>
We create a <code>JPanel</code> component. It is a generic lightweight 
container. <code>JFrame</code> has an area, where you put the components 
called the <b>content pane</b>. We put the panel into this pane.
</p>

<pre class="explanation">
panel.setLayout nil 
</pre>

<p>
By default, the <code>JPanel</code> has a <code>FlowLayout</code> manager. The layout
manager is used to place widgets onto the 
containers. If we call <code>setLayout nil</code> we can position our 
components absolutely. For this, we use the 
<code>setBounds</code> method.
</p>

<pre class="explanation">
panel.setToolTipText "A Panel container"
</pre>

<p>
To enable a tooltip, we call the <code>setTooltipText</code> method.
</p>

<img src="/img/gui/jythonswing/tooltip.png" alt="Tooltip">
<div class="figure">Figure: Tooltip</div>


<h2>Quit button</h2>

<p>
In the last example of this section, we will create a quit button. 
When we press this button, the application terminates. 
</p>

<pre class="code">
#!/usr/local/bin/jruby

# ZetCode JRuby Swing tutorial
#
# This program creates a quit
# button. When we press the button,
# the application terminates. 
#
# author: Jan Bodnar
# website: www.zetcode.com
# last modified: December 2010

include Java

import javax.swing.JButton
import javax.swing.JFrame
import javax.swing.JPanel
import java.lang.System


class Example &lt; JFrame
  
    def initialize
        super "Quit button"
        
        self.initUI
    end
      
    def initUI
      
        panel = JPanel.new
        self.getContentPane.add panel

        panel.setLayout nil

        qbutton = JButton.new "Quit"
        qbutton.setBounds 50, 60, 80, 30
        qbutton.add_action_listener do |e|
            System.exit 0
        end
        
        panel.add qbutton    
        
        self.setDefaultCloseOperation JFrame::EXIT_ON_CLOSE
        self.setSize 300, 200
        self.setLocationRelativeTo nil
        self.setVisible true
    end
  
end

Example.new
</pre>

<p>
We position a <code>JButton</code> on the window. We will add an action listener
to this button.
</p>


<pre class="explanation">
qbutton = JButton.new "Quit"
qbutton.setBounds 50, 60, 80, 30
</pre>

<p>
Here we create a button. We position it by calling the <code>setBounds</code> 
method. 
</p>

<pre class="explanation">
qbutton.add_action_listener do |e|
    System.exit 0
end
</pre>

<p>
We add an action listener to the button. The listener
terminates the application.
</p>

<img src="/img/gui/jythonswing/quitbutton.png" alt="Quit button">
<div class="figure">Figure: Quit button</div>


<p>
This section was an introduction to the Swing toolkit with the JRuby language.
</p>

<br>
<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified December 21, 2010  <span class="copyright">&copy; 2007 - 2012 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>

